<template>
	<view style="position: relative;display: flex;align-items: flex-start;justify-content: center;flex-direction: column;">
		<!-- <view class="text" style="background-color: red;">麦卡伦盈钻麦卡伦盈钻</view>
		<view class="text">WWWWWWWWWWWWWWWWWWW</view>
		<view class="text">wwwwwwwwwwwwwwwwwww</view>
		<view class="text">&&&&&&&&&&&&&&&&&&&</view>
		<view class="text">，，，，，，，，，，，，，，，，，，，，，，，，，，</view>
		<view class="text">,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,</view>
		<view class="text">
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
		</view>
		<view class="text">麦卡伦THEMACALLAN盈钻</view>
		<view class="text">
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			麦卡伦双雪莉桶麦卡伦双雪莉桶
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
		</view>
		<view class="text">
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			THEMACALLANTHEMACALLAN
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
		</view>
		<view class="text">
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image style="width: 24rpx;height: 24rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
			麦卡伦，@@@  THE MACALLAN
		</view> -->

		<view class="inner_box">
			<block v-for="(item, index) in inputText" :key="index">
				<image v-if="item === '{'" class="icon_item" src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
				<image v-else-if="item === '}'" class="icon_item" src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
				<block v-else>{{item}}</block>
			</block>
			
		</view>
		<view style="margin-top: 200rpx;">添加表情
			<image @click="handleAddIcon(1)" style="width: 80rpx;height: 80rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Save@4x.png" />
			<image @click="handleAddIcon(2)" style="width: 80rpx;height: 80rpx;"
				src="https://100000063-1252208446.file.myqcloud.com/images/litha/Macallan@4x.png" />
		</view>
		<textarea class="weui-input" :value="inputVal" placeholder="输入内容" confirm-type="done" @input="inputInnerText" />
	</view>

</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				inputText: [],
				inputVal: "",
			}
		},
		async onLoad(option) {

		},
		async onShow() {
			try {

			} catch (e) {

			}
		},

		onHide() {

		},
		onUnload(options) {
		},
		methods: {
			inputInnerText(e) {
				console.log("#########  e", e)
				const {
					detail: {
						value
					}
				} = e;
				this.inputVal = value;
				// this.inputText.push(value);
				// this.inputVal = "";
				// this.inputText.forEach(item=>{
				// 	this.inputVal +=item;
				// })
				const arr = [...this.inputVal];
				this.inputText = arr;
				console.log("######## this.inputText", this.inputText)
			},
			handleAddIcon(index) {
				if (index == 1) {
					// this.inputText.push('{')
					this.inputVal += '{';
				} else {
					// this.inputText.push('}')
					this.inputVal += '}';
				}
				
				const arr = [...this.inputVal];
				this.inputText = arr;
				console.log("######## this.inputText", this.inputText)
			}
		}
	}
</script>
<style lang="less">
	.text {
		font-size: 24rpx;
		font-family: FrankNew-Medium, NotoSansSC-Medium;
		margin-left: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	 
	 // width: 8 x 12 x 2;
	 // height: 2 x 12 x 2;
	 
	.inner_box {
		width: 192rpx;
		height: 48rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		font-family: FrankNew-Medium, NotoSansSC-Medium;
		background-color: aquamarine;
		margin-top: 100rpx;
		margin-left: 200rpx;
		display: flex;
		flex-wrap: wrap;
		overflow-wrap: anywhere; /* 标准属性 */
	}

	.weui-input {
		margin: 40rpx auto;
		width: 90%;
		height: 200rpx;
		border: 1px solid #000;
	}
	.icon_item{
		width: 24rpx;
		height: 24rpx;
	}
</style>